<template>
  <!-- 客户关怀-新增 -->
  <div class="newly_increased_call_on">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="新增拜访信息"
      left-arrow
      @click-left="$router.go(-1)"
      :border="false"
      fixed
      z-index="999"
    >
      <template #right>
        <van-icon name="wap-home-o" size="25" @click="$router.push('/home')" />
      </template>
    </van-nav-bar>

    <!--客户名称  -->
    <van-cell-group>
      <van-field
        label="客户名称"
        v-model="value"
        readonly
        @click="
          $router.push({
            path: '/selectTheCustomer',
          })
        "
      />
    </van-cell-group>

    <!-- 下拉选择 -->
    <div class="xiala">
      <!-- 拜访标题 -->
      <van-cell is-link @click="showPopup1"
        >拜访标题 <span>{{ biaoti }}</span></van-cell
      >
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="onCancel"
        />
      </van-popup>

      <!-- 拜访原因 -->
      <van-cell is-link @click="showPopup2"
        >拜访原因 <span>{{ yuanyin }}</span></van-cell
      >
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="onCancel"
        />
      </van-popup>

      <!-- 拜访时间 -->
      <van-cell is-link @click="showPopup3"
        >拜访时间 <span>{{ shijian }}</span></van-cell
      >
      <van-popup v-model="show3" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm3"
          @cancel="onCancel"
          :formatter="formatter"
        />
      </van-popup>
    </div>

    <!-- 输入框 -->
    <div class="shurukuang">
      <van-field
        v-model="message1"
        autosize
        rows="1"
        label="拜访地址"
        type="textarea"
        placeholder="请输入"
      />
      <van-field
        v-model="message2"
        autosize
        rows="1"
        label="拜访情况"
        type="textarea"
        placeholder="请输入"
      />
      <van-field
        v-model="message3"
        autosize
        rows="1"
        label="竞争信息收集状况"
        type="textarea"
        placeholder="请输入"
      />
    </div>

    <van-button
      type="primary"
      size="large"
      color="#039"
      round
      @click="saveClient"
    >
      保存
    </van-button>
  </div>
</template>

<script>
import { TheNewVisit } from "@/request/api";
export default {
  data() {
    return {
      // 选择客户名称
      value: "点击选择",
      // 客户id
      id: "",

      // 弹出层显示-拜访标题
      show1: false,

      // 弹出层显示-拜访标题
      show2: false,

      // 弹出层显示-拜访时间
      show3: false,

      // 拜访标题
      columns1: [
        "重要商务会议拜访",
        "标题2",
        "标题3",
        "标题4",
        "标题5",
        "标题6",
        "标题7",
        "标题8",
      ],
      biaoti: "点击选择",

      //   拜访原因
      columns2: [
        "例行走访",
        "售中支撑",
        "售前支撑",
        "售后支撑",
        "闲的蛋疼",
        "没事找事",
        "关爱客户",
        "被迫无奈",
      ],
      yuanyin: "点击选择",

      //   拜访时间
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      shijian: "点击选择",
      // 拜访时间-月
      Month: "",
      // 拜访时间-日
      Date: "",
      // 拜访时间-时分秒
      Hours: "",

      // 拜访地址
      message1: "",
      // 拜访情况
      message2: "",
      // 竞争信息收集状况
      message3: "",
    };
  },
  created() {
    if (this.$route.query.custName) {
      this.id = JSON.parse(this.$route.query.id);
      this.value = JSON.parse(this.$route.query.custName);
      // console.log(this.id);
      // console.log(this.value);
    }
  },
  methods: {
    // 弹出显示-拜访标题
    showPopup1() {
      this.show1 = true;
    },

    // 弹出显示-拜访原因
    showPopup2() {
      this.show2 = true;
    },

    // 弹出显示-拜访时间
    showPopup3() {
      this.show3 = true;
    },

    // 拜访标题
    onConfirm1(value, index) {
      this.biaoti = value;
      this.show1 = false;
    },

    // 拜访原因
    onConfirm2(value, index) {
      this.yuanyin = value;
      this.show2 = false;
    },
    // 拜访时间
    onConfirm3(value, index) {
      // console.log(this.currentDate);
      // 拜访时间-月
      this.Month =
        value.getMonth() + 1 > 10
          ? value.getMonth() + 1
          : `0${value.getMonth() + 1}`;
      // 拜访时间-日
      this.Date =
        value.getDate() > 10 ? value.getDate() : `0${value.getDate()}`;

      // 拜访时间-时分秒
      this.Hours =
        value.getHours() > 10
          ? value.getHours() + ":00:00"
          : `0${value.getHours()}` + ":00:00";
      // 拜访时间
      this.shijian = `${value.getFullYear()}-${this.Month}-${this.Date} ${
        this.Hours
      }`;
      // console.log(this.shijian);
      this.show3 = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },

    onCancel() {
      this.$toast("取消");
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
    },

    // 保存按钮
    saveClient() {
      if (
        this.value == "" ||
        this.biaoti == "" ||
        this.yuanyin == "" ||
        this.shijian == "" ||
        this.message1 == "" ||
        this.message2 == "" ||
        this.message3 == ""
      ) {
        this.$toast("某项未填入");
      } else {
        TheNewVisit({
          custId: this.id,
          custName: this.value,
          visitTime: this.shijian,
          visitAddress: this.message1,
          visitTitle: this.biaoti,
          visitReason: this.yuanyin,
          visitSituation: this.message2,
          collectSituation: this.message3,
        }).then((res) => {
          // console.log(res);
        });
        // 提示并跳转
        this.$toast.success("添加成功");
        setTimeout(() => {
          this.$router.push(`/customerCare`);
        }, 1000);
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
.newly_increased_call_on {
  padding-top: 0.6rem;
  /* 顶部导航 */
  .van-nav-bar {
    background-color: #003399;
  }
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #ffffff;
  }
  /* 下拉选项 */
  .xiala {
    padding-top: 0.15rem;
    .van-cell {
      span {
        padding-left: 0.4rem;
      }
    }
    .van-icon {
      color: #969799;
    }
  }

  /* 输入框 */
  .shurukuang {
    /deep/.van-field {
      margin-top: 0.15rem;
    }
  }
  .van-button {
    background-color: #fff;
    position: fixed;
    bottom: 0;
  }
}
</style>